<template>
	<div class="teachAlbum">
		<div class="teach_h clear">
			<span>我的专辑</span>
			<div class="teach_lk fr">
				<router-link to="/teach/album/add">添加专辑</router-link>
			</div>
		</div>
		<!--  -->
		<ul v-loading="loading">
			<li class="teachVideo_ls clear" v-for="(item, index) in albumList" :key='item.albumid'>
				<a target="_blank" @click="openAlbum(item)" class="teachVideo_lsl fl box">
					<img :src="BASE_URL + item.picture" :onerror="errorImg">
				</a>
				<div class="teachVideo_lsr">
					<div class="teachVideo_lsr1 clear">
						<a target="_blank" @click="openAlbum(item)">
							{{ item.name }}
						</a>
						<div class="teachVideo_lsr1_r fr">
							<el-popover placement="bottom" width="" popper-class="ioperation_hover" trigger="hover">
								<ul class="r_ioperation">
									<li>
										<router-link :to="{ path: '/teach/album/edit', query: { id: item.albumid } }">编辑</router-link>
									</li>
									<li @click="removeList(item.albumid)">删除</li>
								</ul>
								<i slot="reference" class="el-icon-arrow-down"></i>
							</el-popover>
						</div>
					</div>
					<!--  -->
					<div class="teachAlbum_lsr2">
						<strong>{{ item.videocount }}门课程</strong>
						<template v-if="item.keyword != ''">
							<span v-for="list in JSON.parse(item.keyword)">{{ list }}</span>
						</template>
					</div>
					<!-- 3 -->
					<div class="teachVideo_lsr2" v-if="item.profile != ''">
						<el-tooltip class="item" effect="dark" :content="item.profile"
							:disabled="item.profile.length < 30 ? true : false" placement="top-start">
							<p>简介：{{ item.profile }}</p>
						</el-tooltip>
					</div>
				</div>
			</li>
		</ul>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>还没发现任何相关的内容哦~</p>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :current-page="page_index" :page-size="page_size"
				layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			albumList: [],
			page_index: 1, //分页
			page_size: this.$g.page_size, //分页--当前页
			total_number: 0, //分页总数
			placeholder: false,
			errorImg: 'this.src="' + require('../../../public/images/image20.png') + '"',
			loading: true
		}
	},
	created() {
		this.getAlbumList();
	},
	methods: {
		/*
			跳转到优课专辑模块查看视频
		 */
		openAlbum(item) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')
			let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/albumDetail&id=${item.albumid}`
			window.open(link)
		},
		getAlbumList() {
			let success = (res => {
				let data = res.data;
				this.albumList = data.data;
				this.total_number = data.data_sum;

				this.loading = false
				this.placeholder = this.albumList.length === 0 ? true : false
			});
			this.$ajax({
				url: 'api/album/albums_list',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					page_index: this.page_index,
					page_size: this.page_size,
					order_type: 'time'
				},
				func: { success: success }
			})
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getAlbumList();
		},
		//删除
		removeList(id) {
			this.$confirm('此操作将永久删除该专辑，是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.$message.success(res.msg);
					this.page_index = 1;
					this.getAlbumList();
				});
				this.$ajax({
					url: 'api/album/album',
					method: 'delete',
					params: {
						albumid: id,
						type: 2
					},
					func: { success: success }
				})
			}).catch(() => { });
		},
	}
}
</script>